<!DOCTYPE html>
<target class="first"></target>
<target class="second"></target>
<script src="../include.js"></script>
<script>
    test(() => {
        // In all test cases, the rule specified as "color: green" should win.
        var testCases = [
            {
                title: 'revert to base',
                style: `
                    @layer base, special;
                    @layer special { target { color: revert-layer; } target.second { color: green; } }
                    @layer base { target { color: green; } target.second { color: red; } }
                `,
            },
            {
                title: 'double revert',
                style: `
                    @layer layer1, layer2, layer3;
                    @layer layer3 { target { color: revert-layer; } target.second { color: revert-layer; } }
                    @layer layer2 { target { color: revert-layer; } target.second { color: green; } }
                    @layer layer1 { target { color: green; } target.second { color: revert-layer; } }
                `,
            },
        ];

        for (let testCase of testCases) {
            const styleElement = document.createElement('style');
            styleElement.textContent = testCase['style'];
            document.head.append(styleElement);

            var targets = document.querySelectorAll('target');
            for (let target of targets) {
                let actual = window.getComputedStyle(target).color;
                if (actual === 'rgb(0, 128, 0)') {
                    println(`PASS: ${testCase['title']} (${target.classList[0]} target)`);
                } else {
                    println(`FAIL: ${testCase['title']} (${target.classList[0]} target) - Expected 'rgb(0, 128, 0)', got '${actual}'`);
                }
            }

            styleElement.remove();
        }

    });
</script>
